<template>
  <el-container>
    <el-header>
      <h1>{{ title }}</h1>
    </el-header>
    <el-main>
      <div class="filter-bar">
        <el-row>
          <el-col :span="12">
            <el-form :model="filter" :rules="rules" ref="ruleForm" :key="randomId" :label-width="labelWidth" :form="form" :inline="true">
              <el-form-item label="按编号" prop="type">
                <el-select v-model="filter.type" placeholder="请选择">
                  <el-option value="1" label="编号"></el-option>
                  <el-option value="2" label="投票数"></el-option>
                  <el-option value="3" label="总分"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="输入查找">
                <el-input v-model="filter.search" prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form>
              <el-form-item>
                <el-pagination
                    background
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="20"
                    layout="prev, pager, next"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <el-table
          :data="tableData"
          size="small"
          stripe
          :row-class-name="tableRowClassName"
          :header-cell-style="{ background: '#f5f5f5' }"
          :data-source="tableDataSource"
      >
        <el-table-column prop="name" label="编号" width="180"></el-table-column>
        <el-table-column prop="voteCount" label="投票数"></el-table-column>
        <el-table-column prop="score" label="总分"></el-table-column>
      </el-table>
      <el-pagination
          background
          :page-sizes="[10, 20, 30, 50]"
          :page-size="20"
          layout="prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent, ref, reactive, computed, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, watch, watchEffect, nextTick, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'App',
  setup() {
    const randomId = ref(0)
    const labelWidth = ref('120px')
    const filter = reactive({
      type: '',
      search: ''
    })
    const rules = {
      type: [
        { required: true, message: '请选择筛选条件', trigger: 'change' }
      ]
    }
    const total = ref(0)
    const tableData = reactive([
      { name: '作品1', voteCount: 50, score: 90 },
      { name: '作品2', voteCount: 20, score: 85 },
      { name: '作品3', voteCount: 10, score: 75 },
      { name: '作品4', voteCount: 10, score: 75 },
      { name: '作品5', voteCount: 5, score: 70 },
      { name: '作品6', voteCount: 3, score: 65 },
      { name: '作品7', voteCount: 2, score: 60 },
      { name: '作品8', voteCount: 1, score: 55 },
      { name: '作品9', voteCount: 0, score: 50 },
      { name: '作品10', voteCount: 0, score: 50 },

    ])
    const tableDataSource = computed(() => {
      let dataSource = []
      if (filter.type === '1') {
        dataSource = tableData.sort((a, b) => b.voteCount - a.voteCount)
      } else if (filter.type === '2') {
        dataSource = tableData.sort((a, b) => b.voteCount - a.voteCount)
      } else if (filter.type === '3') {
        dataSource = tableData.sort((a, b) => b.score - a.score)
      } else {
        dataSource = tableData
      }
      if (filter.search !== '') {
        dataSource = dataSource.filter(item => item.name.includes(filter.search))
      }
      return dataSource.slice(0, total.value)
    })

    const tableRowClassName = ({ row, rowIndex }) => {
      if (row.voteCount === 0) {
        return 'no-vote'
      }
    }

    onMounted(() => {
      // 初始化数据
      // ...
    })

    onBeforeMount(() => {
      // 预加载数据
      // ...
    })

    onBeforeUpdate(() => {
      // 更新前操作
      // ...
    })

    onUpdated(() => {
      // 更新后操作
      // ...
    })

    onBeforeUnmount(() => {
      // 卸载前操作
      // ...
    })

    onUnmounted(() => {
      // 卸载后操作
      // ...
    })

    const handleSizeChange = (value) => {
      console.log(`每页条数: ${value}`)
    }

    const handleCurrentChange = (value) => {
      console.log(`当前页: ${value}`)
    }

    return {
      randomId,
      labelWidth,
      filter,
      rules,
      total,
      tableData,
      tableDataSource,
      tableRowClassName,
      handleSizeChange,
      handleCurrentChange
    }
  }
})
</script>

<style scoped>
/* 添加一些样式 */
.el-table .cell {
  padding: 5px 10px;
}

.el-table .cell {
  padding: 5px 10px;
}

.no-vote {
  background-color: #f5f5f5;
}
</style>
